<!-- 币余宝 - 列表 -->
<template>
  <div class="bao-list">
    <!-- 头部导航 以前是放在fp.vue中 用于解决 导航与内容的对应 -->
    <tab :line-width=2 active-color='#fea620' v-model="index">
      <tab-item v-for="(tab, index) in tabList" @on-item-click="tabChange(index)" :key="index">{{tab}}</tab-item>
    </tab>
    <div class="fp-banner">
      <img src="../../../../static/images/fp/bb_banner.png" alt="">
    </div>
    <div class="fp-list">
      <div class="fp-list-title">推荐项目</div>
      <div class="item" v-for="(item, index) in digList" :key="index">
        <div class="item-title">
          <div class="name">{{item.name}}</div>
          <div class="label-group">
            <span class="label" v-for="(label, labelIndex) in item.content" :key="labelIndex" :class="{red: label === '固定收益', yellowColor: label === '1000起投'}">{{label}}</span>
          </div>
        </div>
        <div class="item-content">
          <div class="left">
            <div class="rate">
              <div class="rate-value">
                <span class="num">{{item.rate}}</span>
              </div>
              <div class="rate-text">{{item.titleRate}}</div>
            </div>
            <div class="date">
              <div class="date-value">
                <span class="num" style='font-size:20px;'>{{item.week}}</span></div>
              <div class="date-text">{{item.titleWeek}}</div>
            </div>
          </div>
          <div class="right">
            <span class="btn" @click="buy(item)">立即投资</span>
          </div>
        </div>
      </div>
    </div>
    <tabbar :isMainFp='true'></tabbar>

  </div>
</template>
<script>
  import Tabbar from '../../../components/common/Tabbar.vue'
  import { Tab, TabItem, Swiper, SwiperItem } from 'vux'
  export default {
    components: {
      Tabbar,
      Tab,
      TabItem,
      Swiper,
      SwiperItem
    },
    data() {
      return {
        digList: [],
        index: 0,
        tabList: ['稳赢基金','币余宝', '智能投顾', 'ETF指数', 'OTC套利', 'BTC指数', 'ICO基金', 'ETF交易', 'BTC交易']
      }
    },
    async created() {
      await this.getProduct()
    },
    methods: {
      tabChange(index) {
        this.index = index;
        let fpPaths = ['winList','digList', 'aiList', 'etfList', 'otcList', 'btcList', 'icoList', 'tetfList', 'tbtcList']
        this.$router.push({ path: `/main/fp/${fpPaths[index]}` })
      },
      async buy(item) {
        this.$store.dispatch("setData", item);
        this.$router.push({ path: '/winDetail', query: { pid: item.pid} })
      },
      getProduct(){
        this.http.get("/product/products?type=BET").then(res=>{
          if(res.status==200){
             this.digList=res.data.BET
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../../static/styles/fp-list";
  .bao-list{
    background: #fff;
  }
  .yellowColor{
    color: #7ED321;
    border-color: #7ED321;
  }
</style>